<template>
    <view class="container" :style="{ height: `calc(100vh - ${navBarHeight + statusBarHeight + height}px)` }">
        <scroll-view class="scroll-view" :style="customStyle" scroll-y :refresher-enabled="refresherEnabled"
            :refresher-threshold="refresherThreshold" :lower-threshold="lowerThreshold" :scroll-top="scrollTop"
            :refresher-triggered="refresherTriggered" @refresherrefresh="onRefresh" @scrolltolower="onScrollToLower">
            <!-- 占位元素，防止 margin collapse -->
            <view style="content: ''; overflow: hidden;"></view>
            <!-- 列表内容 -->
            <slot></slot>
            <!-- 加载状态 -->
            <u-loadmore v-if="showLoading" height="30" :status="loadMoreStatus" :loading-text="loadingText"
                :loadmore-text="finishedText" />
        </scroll-view>
    </view>
</template>
<script setup>
import { ref, onMounted, computed, watchEffect, onUnmounted, watch } from 'vue';
import { getSystemInfo } from '@/utils';
/** 状态栏高度 */
const statusBarHeight = ref(0);
/** 导航栏高度 */
const navBarHeight = ref(44);
let timer = null;
const props = defineProps({
    /** 自定义样式 */
    customStyle: {
        type: Object,
        default: () => ({
            padding: '0rpx 15rpx',
            backgroundColor: '#F8F8F8'
        })
    },
    height: {
        type: Number,
        default: 0
    },
    /** 是否正在加载 */
    loading: {
        type: Boolean,
        default: false
    },
    /** 是否启用下拉刷新 */
    refresherEnabled: {
        type: Boolean,
        default: true
    },
    /** 下拉刷新阈值 */
    refresherThreshold: {
        type: Number,
        default: 45
    },
    /** 触底阈值 */
    lowerThreshold: {
        type: Number,
        default: 45
    },
    /** 滚动条位置 */
    scrollTop: {
        type: Number,
        default: 0
    },
    /** 空状态文本 */
    emptyText: {
        type: String,
        default: '暂无数据'
    },
    /** 加载中文本 */
    loadingText: {
        type: String,
        default: '加载中...'
    },
    /** 加载完成文本 */
    finishedText: {
        type: String,
        default: '没有更多了'
    },
    /** 是否显示加载状态 */
    showLoading: {
        type: Boolean,
        default: true
    },
    /** 下拉刷新状态 */
    refresherTriggered: {
        type: Boolean,
        default: false
    },
    /** 是否加载完成 */
    finished: {
        type: Boolean,
        default: false
    }
})
const refresherTriggered = ref(props.refresherTriggered);
watch(() => props.refresherTriggered, (val) => {
    console.log('val', val);
    refresherTriggered.value = val;
});

const emit = defineEmits(['refresh', 'scrolltolower'])
/**
 * 加载更多状态
 */
const loadMoreStatus = computed(() => {
    if (props.loading) return 'loading';
    if (props.finished) return 'nomore';
    return 'loadmore';
});
/**
 * 处理下拉刷新事件
 */
const onRefresh = async () => {
    if (refresherTriggered.value) return;
    refresherTriggered.value = true;
    try {
        console.log('下拉刷新');
        await emit('refresh');
    } finally {
        timer = setTimeout(() => {
            refresherTriggered.value = false;
        }, 1000)
    }
};
/**
 * 处理触底事件
 */
const onScrollToLower = () => {
    if (props.loading || props.finished) return;
    console.log('触底了');
    emit('scrolltolower');
};



onMounted(() => {
    const { statusBarHeight: statusBarHeightValue, navBarHeight: navBarHeightValue } = getSystemInfo();
    statusBarHeight.value = statusBarHeightValue;
    navBarHeight.value = navBarHeightValue;
})
onUnmounted(() => {
    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
})
</script>
<style lang="scss" scoped>
.container {
    box-sizing: border-box;
    background-color: #F0EFF4;
    width: 100vw;
    overflow: hidden;

    .scroll-view {
        box-sizing: border-box;
        height: 100%;
        width: 100%;
    }
}
</style>